<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/index.css" rel="stylesheet">
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app"
     style="display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;overflow: scroll;">
    <div class="tooltip-container" @click="togglePopup">
        <span class="tooltip">时间差不多咯~</span>
        <span class="text">添加学生👆</span>
        <span>四组集中团👋</span>
    </div>
    <div class="messageQueue">
        <div class="tooltip-container_" v-for="item of messageQueue">
            <span class="tooltip_">操作成功!</span>
            <span class="text">{{item}}</span>
        </div>
    </div>
    <div class="popup" id="myPopup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <div style="display:flex;justify-content: center">
                <div class="spinner">
                    <div class="spinner1"></div>
                </div>
            </div>
            <div class="popup-item">
                <div class="wave-group">
                    <input required="" type="text" class="input" v-model="insert.name">
                    <span class="bar"></span>
                    <label class="label">
                        <span v-for="(item,index) of '学生姓名'" class="label-char"
                              :style="'--index:'+index">{{item}}</span>
                    </label>
                </div>
                <div class="wave-group">
                    <input required="" type="text" class="input" v-model="insert.sex">
                    <span class="bar"></span>
                    <label class="label">
                        <span v-for="(item,index) of '学生性别'" class="label-char"
                              :style="'--index:'+index">{{item}}</span>
                    </label>
                </div>
                <div class="wave-group">
                    <input required="" type="text" class="input" v-model="insert.age">
                    <span class="bar"></span>
                    <label class="label">
                        <span v-for="(item,index) of '学生年龄'" class="label-char"
                              :style="'--index:'+index">{{item}}</span>
                    </label>
                </div>
                <div class="wave-group">
                    <input required="" type="text" class="input" v-model="insert.phone">
                    <span class="bar"></span>
                    <label class="label">
                        <span v-for="(item,index) of '学生电话'" class="label-char"
                              :style="'--index:'+index">{{item}}</span>
                    </label>
                </div>
                <div class="wave-group">
                    <input required="" type="text" class="input" v-model="insert.tail">
                    <span class="bar"></span>
                    <label class="label">
                        <span v-for="(item,index) of '学生介绍'" class="label-char"
                              :style="'--index:'+index">{{item}}</span>
                    </label>
                </div>
                <button class="button_" @click="insertIntoStudentsByStudent()"> 添加！
                </button>
            </div>
        </div>
    </div>
    <div style="width: 80%;align-items: center;display: flex;justify-content:center;flex-wrap: wrap;padding-top: 10%;padding-bottom: 10%;max-height: 100vh;overflow: scroll">
        <div v-for="(item,index) of students" key="index" class="card">
            <div class="content">
                <p class="heading">
                    {{item.name}}
                </p>
                <label v-if="item.display" class="myLabel content">
                    <input type="text" autocomplete="off" name="text" class="input_" placeholder="学生id"
                           v-model="item.id" disabled>
                    <input type="text" autocomplete="off" name="text" class="input_" placeholder="学生年龄"
                           v-model="item.age">
                    <input type="text" autocomplete="off" name="text" class="input_" placeholder="学生性别"
                           v-model="item.sex">
                    <input type="text" autocomplete="off" name="text" class="input_" placeholder="学生电话"
                           v-model="item.phone">
                    <input type="text" autocomplete="off" name="text" class="input_" placeholder="学生简绍"
                           v-model="item.tail">
                </label>
                <div v-if="item.display"
                     style="display:flex;align-items: center;justify-content:space-between;width: 100%;">
                    <button class="btn" @click="updateStudentsByStudent(item)">修改</button>
                    <button class="btn" @click="bsw(index)">{{item.display === false ? '显示更多' : '收缩'}}</button>
                    <button class="btn" @click="deleteStudentsWhereIdEqual(item)">删除</button>
                </div>
                <button v-else class="btn" @click="bsw(index)">
                    {{item.display === false ? '显示更多' : '收缩'}}
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const {createApp, ref} = Vue
    const students = ref([{id: '', name: '', sex: '', age: '', phone: '', tail: '', display: true}]);
    const insert = ref({id: '', name: '', sex: '', age: '', phone: '', tail: ''});
    const bsw = (e) => {
        students.value[e].display = students.value[e].display === false;
    }
    const messageQueue = ref([]);
    const togglePopup = () => {
        const popup = document.getElementById("myPopup");
        popup.style.display = popup.style.display === "none" ? "block" : "none";
    }
    const pushMessage = (msg) => {
        messageQueue.value.push(msg);
    }
    let count = 0;
    setInterval(() => {
        if (messageQueue.value.length > 0) {
            count++;
            if (count % 2 === 0) {
                messageQueue.value.shift();
            }
        }
    }, 1000);
    const selectAllFromStudents = () => {
        axios.get('http://localhost:8080/select-all-from-students')
            .then(function (response) {
                students.value = response.data;
            }).catch(function (error) {
            messageQueue.value.push('获取信息失败');
        });
    }
    const updateStudentsByStudent = (e) => {
        axios.post('http://localhost:8080/update-students-by-student', {
            id: e.id,
            name: e.name,
            sex: e.sex,
            age: e.age,
            phone: e.phone,
            tail: e.tail
        }).then(function (response) {
            const msg = response.data === 500 ? '修改失败' : '修改成功';
            messageQueue.value.push(msg);
        }).catch(function (error) {
            messageQueue.value.push('修改失败');
        });
    }
    const deleteStudentsWhereIdEqual = (e) => {
        axios.get('http://localhost:8080/delete-students-where-id-equal?id=' + e.id).then(function (response) {
            const msg = response.data === 500 ? '删除失败' : '删除成功';
            messageQueue.value.push(msg);
            selectAllFromStudents();
        }).catch(function (error) {
            messageQueue.value.push('删除失败');
        });
    }
    const insertIntoStudentsByStudent = () => {
        const e = insert.value;
        axios.post('http://localhost:8080/insert-into-students-by-student', {
            id: null,
            name: e.name,
            sex: e.sex,
            age: e.age,
            phone: e.phone,
            tail: e.tail
        }).then(function (response) {
            const msg = response.data === 500 ? '添加失败' : '添加成功';
            messageQueue.value.push(msg);
            selectAllFromStudents();
        }).catch(function (error) {
            messageQueue.value.push('添加失败');
        });
    }
    selectAllFromStudents();
    createApp({
        setup() {
            return {
                students,
                bsw,
                togglePopup,
                updateStudentsByStudent,
                deleteStudentsWhereIdEqual,
                insertIntoStudentsByStudent,
                insert,
                messageQueue
            }
        }
    }).mount('#app')
</script>
<script src="/index.js"></script>
</html>